<template>
  <div id="book-item">
    <el-card class="book-card">
      <el-row>
        <el-col :span="18" :push="2">
          <el-image
              :src="url"
              @click.stop.prevent="jump"
              class="book-image"
              lazy
          >
            <template v-slot:placeholder>
              <i class="el-icon-picture-outline" />
            </template>
          </el-image>
        </el-col>
      </el-row>
      <el-row>
        <el-link type="primary" @click.stop.prevent="jump">
          {{ cutTitle }}
        </el-link>
      </el-row>
      <el-row>
        <el-col :span="8" :push="8">
          <span class="price">￥ {{ price.toFixed(2) }}</span>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "BookItem",
  props: {
    id: Number,
    title: String,
    price: Number,
    url: String,
    custom: {
      default: false,
      type: Boolean
    }
  },
  methods: {
    jump() {
      if (!this.custom)
        this.$router.push(`/detail/${this.id}`);
      else
        this.$emit("click");
    }
  },
  computed: {
    cutTitle() {
      if (this.title.length <= 45) {
        return this.title
      } else {
        return this.title.slice(0, 45)+"..."
      }
    }
  }
}
</script>

<style scoped>
  .price {
    font-size: 16pt;
    color: red;
  }

  .book-image:hover {
    cursor: pointer;
  }

  #book-item {
    padding-bottom: 20px;
    text-align: center;
  }

  .book-card {
    /*width: 275px;*/
    height: 330px;
  }
</style>